<template>
    <main class="root">
        <main-selector class="main-selector" :selects-data="selectsData"></main-selector>
        <div class="theatres-box">
            <div class="title-box">
                <h2 class="title">影院列表</h2>
            </div>
            <div class="theatre-list">
                <ul>
                    <li class="theatre-item clearfix" v-for="t in theatres">
                        <div class="left clearfix">
                            <a href="#" class="name">{{t.name}}</a>
                            <span class="address"><span>地址：</span>{{t.address}}</span>
                        </div>
                        <div class="right clearfix">
                            <span class="price"><span class="rmb">￥</span><span>{{t.price}}</span><span>起</span></span>
                            <a class="btn" href="#">选座购票</a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <div class="paging-box">
            <my-paging class="my-paging"></my-paging>
        </div>
    </main>
</template>

<script>
    import mainSelector from '../components/main-selector'
    import myPaging from '../components/my-paging'
    export default {
        name: "theatres",
        data:function () {
            return {
                selectsData:[
                    {
                        name:'品牌',
                        selects:[
                            {name:'全部',isActive:true},
                            {name:'MC影城',isActive:false},
                            {name:'潇湘国际影城',isActive:false},
                            {name:'万达影城',isActive:false},
                            {name:'CGV影城',isActive:false},
                            {name:'恒大影城',isActive:false},
                            {name:'中影国际影城',isActive:false},
                            {name:'大地影院',isActive:false},
                            {name:'橙天嘉禾影城',isActive:false},
                            {name:'星美国际影城',isActive:false},
                            {name:'横店电影城',isActive:false},
                            {name:'金逸影城',isActive:false},
                            {name:'太平洋电影城',isActive:false},
                            {name:'博纳国际影城',isActive:false},
                            {name:'沃美影城',isActive:false},
                            {name:'SFC上影影城',isActive:false},
                            {name:'保利国际影城',isActive:false},
                            {name:'卢米埃影城',isActive:false},
                            {name:'银兴乐天影城',isActive:false},
                            {name:'其他',isActive:false},
                        ]
                    },
                    {
                        name:'行政区',
                        selects:[
                            {name:'全部',isActive:true},
                            {name:'地铁附近',isActive:false},
                            {name:'岳麓区',isActive:false},
                            {name:'浏阳市',isActive:false},
                            {name:'雨花区',isActive:false},
                            {name:'长沙县',isActive:false},
                            {name:'天心区',isActive:false},
                            {name:'开福区',isActive:false},
                            {name:'芙蓉区',isActive:false},
                            {name:'望城区',isActive:false},
                            {name:'宁乡县',isActive:false},
                            {name:'其他',isActive:false},
                        ]
                    },
                    {
                        name:'特殊厅',
                        selects:[
                            {name:'全部',isActive:true},
                            {name:'IMAX厅',isActive:false},
                            {name:'中国巨幕厅',isActive:false},
                            {name:'杜比全景声厅',isActive:false},
                            {name:'杜比影院',isActive:false},
                            {name:'RealD厅',isActive:false},
                            {name:'RealD 6FL厅',isActive:false},
                            {name:'儿童厅',isActive:false},
                            {name:'巨幕厅',isActive:false},
                            {name:'4D厅',isActive:false},
                            {name:'4K厅',isActive:false},
                            {name:'4DX厅',isActive:false},
                            {name:'其他',isActive:false},
                        ]
                    },
                ],
                theatres:[
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },{
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },
                    {
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },{
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },{
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },{
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },{
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },{
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },{
                        name:'万达影城(梅溪湖步步高店)',
                        address:'地址：岳麓区枫林三路1099号步步高梅溪新天地购物中心D区L3楼',
                        price:'33.5'
                    },

                ]
            }
        },
        components:{
            'main-selector':mainSelector,
            'my-paging':myPaging,
        }
    }
</script>

<style scoped>
    main {
        padding-bottom: 50px;
    }
    .main-selector {
        width: 1200px;
        margin: 0 auto;
        margin-top: 130px;
        box-sizing: border-box;
    }
    .theatres-box {
        width: 1200px;
        margin: 0 auto;
        margin-top: 40px;

    }
    .theatres-box .title-box .title{
        font-weight: bold;
        font-size: 18px;
        line-height: 18px;
        border-left: 3px solid #e5342a;
        padding-left: 10px;
    }
    .theatre-item {
        height: 46px;
        padding: 20px 0;
        border-bottom: 1px solid #e5e5e5;
    }
    .theatre-item .left {
        float: left;
        width: fit-content;
    }
    .theatre-item .right{
        width: fit-content;
        float: right;
    }

    .theatre-item .left .name,.theatre-item .left .address{
        display: block;
    }
    .theatre-item .left .name {
        font-size: 16px;
        margin-bottom: 2px;
        color: #333333;
    }
    .theatre-item .left .name:hover{
        color: #f03d37;
    }
    .theatre-item .left .address{
        font-size: 14px;
        color: #999999;
    }
    .theatre-item .right{
        line-height: 46px;
    }
    .theatre-item .right .price {
        display: block;
        float: left;
        color: #f03d37;
        font-size: 16px;
    }
    .theatre-item .right .price .rmb{
        font-size: 12px;
    }
    .theatre-item .right .price>span:nth-of-type(3){
        color: #999999;
    }
    .theatre-item .right a.btn{
        width: 80px;
        display: block;
        float: left;
        margin-left: 40px;
        height: 30px;
        background-color: #f03d37;
        margin-top: 8px;
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        border-radius: 30px;
        font-size: 14px;
        box-shadow: 0 2px 10px -2px #f03d37;
    }
    .theatre-item .right a.btn:hover{
        background-color: #f03d3799;
    }
    .paging-box{
        margin-top: 20px;
    }
    .my-paging{
        margin:  0 auto;
    }
</style>
